<template>
    <div class="common-layout">
        <el-container>
            <el-header height="150px" class="head" align="center">
                <p class="title">查询租客信息</p>
                <div class="input-group">
                    <label class="inputlabel">租客姓名: <el-input style="width: 240px" v-model="renterName"
                            placeholder="请输入租客姓名"></el-input></label>
                    <el-button style="width: 150px;height: 30px;background-color: cadetblue;color: white;"
                        @click="SearchOne">搜索</el-button>
                    <el-button style="width: 150px;height: 30px;background-color: #4caf50;color: white;"
                        @click="ShowAddDialog">新增</el-button>
                </div>
            </el-header>
            <el-main id="main">
                <el-table :data="Store.tableData" width= "70%" height="480" align="center">
                    <el-table-column prop="renterId" label="租客编号" width="100" align="center" />
                    <el-table-column prop="name" label="姓名" width="100" align="center" />
                    <el-table-column prop="idCard" label="身份证号" width="250" align="center" />
                    <el-table-column prop="gender" label="性别" width="100" align="center" />
                    <el-table-column prop="address" label="地址" width="250" align="center" />
                    <el-table-column prop="phone" label="联系电话" width="250" align="center" />
                    <el-table-column label="操作" align="center" width="250">
                        <template v-slot="scope">
                            <el-popover placement="right" :width="400" trigger="click">
                                <template #reference>
                                    <el-button
                                        style="margin-right: 16px;background-color: cadetblue;color: white;">更改</el-button>
                                </template>
                                <el-form label-position="left" label-width="auto">
                                    <el-form-item label="租客编号:">
                                        <el-input v-model="scope.row.renterId" disabled />
                                    </el-form-item>
                                    <el-form-item label="姓名:">
                                        <el-input v-model="scope.row.name" />
                                    </el-form-item>
                                    <el-form-item label="身份证号:">
                                        <el-input v-model="scope.row.idCard" />
                                    </el-form-item>
                                    <el-form-item label="性别:">
                                        <el-input v-model="scope.row.gender" />
                                    </el-form-item>
                                    <el-form-item label="地址:">
                                        <el-input v-model="scope.row.address" />
                                    </el-form-item>
                                    <el-form-item label="联系电话:">
                                        <el-input v-model="scope.row.phone" />
                                    </el-form-item>
                                </el-form>
                                <el-button @click="Update(scope.row)" class="button"
                                    style="background-color: cadetblue;color: white;">提交</el-button>
                            </el-popover>
                            <el-button @click="Delete(scope.row.renterId)"
                                style="background-color: brown; color: white;" plain>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>

        <el-dialog title="新增租客" v-model="addDialogVisible">
            <el-form label-position="left" label-width="auto">
                <el-form-item label="姓名:">
                    <el-input v-model="newRenter.name" />
                </el-form-item>
                <el-form-item label="身份证号:">
                    <el-input v-model="newRenter.idCard" />
                </el-form-item>
                <el-form-item label="性别:">
                    <el-input v-model="newRenter.gender" />
                </el-form-item>
                <el-form-item label="地址:">
                    <el-input v-model="newRenter.address" />
                </el-form-item>
                <el-form-item label="联系电话:">
                    <el-input v-model="newRenter.phone" />
                </el-form-item>
            </el-form>
            <el-button @click="AddRenter" class="button" style="background-color: #4caf50;color: white;">提交</el-button>
        </el-dialog>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import useRenterStore from '../../store/useRenterStore.js'

const renterName = ref('');
const addDialogVisible = ref(false);
const newRenter = ref({
    name: '',
    idCard: '',
    gender: '',
    address: '',
    phone: ''
});

const Store = useRenterStore()

// 挂载时参数为空，查询全部数据
onMounted(() => {
    Store.Search();
});

// 有条件查询
function SearchOne() {
    if (!renterName.value) {
        ElMessage.error('请输入租客姓名');
        Store.Search();
        return;
    }
    Store.SearchOne(renterName.value);
}

// 显示新增对话框
function ShowAddDialog() {
    addDialogVisible.value = true;
}

// 新增租客信息
function AddRenter() {
    Store.AddRenter(newRenter.value).then(() => {
        Store.Search();
        ElMessage({
            type: 'success',
            message: '新增成功',
        });
    }).catch(() => {
        ElMessage({
            type: 'error',
            message: '新增失败',
        });
    });
    addDialogVisible.value = false;
}

// 删除租客信息
function Delete(renterId) {
    ElMessageBox.confirm(
        '是否删除',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        Store.DeleteRenter(renterId);
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '删除失败',
        })
    })
}

// 更新租客信息
function Update(row) {
    ElMessageBox.confirm(
        '是否更改',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        Store.UpdateRenter(row);
        ElMessage({
            type: 'success',
            message: '更改成功',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '更改失败',
        })
    })
}
</script>

<style scoped>
.title {
    height: 30px;
    margin-bottom: 15px;
    padding-top: 15px;
    font-size: 20px;
    font-weight: 100;
}

.head {
    margin-left: 30px;
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 调整输入框和按钮之间的间距 */
}

.main {
    position: relative;
    top: 20px;
}

.inputlabel {
    border: 0px solid black;
    margin-right: 20px;
}
</style>
